<template>
  <div>
    <!-- <div id="main" style="width:900px ;height:300px; width: 600px;"></div> -->
    <div id="main1" style="width:800px ;height:300px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'App',
  data() {
    return {

    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getPie()
    })
  },
  methods: {
    getPie() {
      // 绘制图表
      // var myChart = echarts.init(document.getElementById('main'))
      var myChart1 = echarts.init(document.getElementById('main1'))
      // 指定图表的配置项和数据
      var option = {
        // title: {
        //   text: '电池报警车辆TOP10',
        //   x: 'left',              //标题位置
        //   textStyle: { //标题内容的样式
        //     color: 'black',
        //     fontStyle: 'normal',
        //     fontWeight: 3000,
        //     fontSize: 16 //主题文字字体大小，默认为18px
        //   },
        // },
        // xAxis: {
        //   type: 'category',
        //   data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'],
        // },
        // yAxis: {
        //   type: 'value'
        // },

        // series: [{
        //   name: 'hill',
        //   type: 'pictorialBar',
        //   barCategoryGap: '-20%',
        //   symbol: 'triangle',
        //   itemStyle: {
        //     normal: {
        //       opacity: 0.5
        //     },
        //     emphasis: {
        //       opacity: 1
        //     }
        //   },
        //   data: [601, 500, 601, 450, 350],
        //   z: 10
        // }, {
        //   name: 'glyph',
        //   type: 'pictorialBar',
        //   barGap: '-150%',
        //   barWidth: 300,
        //   symbolPosition: 'end',
        //   symbolSize: 50,
        //   symbolOffset: [0, '-120%'],

        // }]
      };
      var option1 = {
        legend: {
          icon: 'circle',
          top: '5%',
          textStyle: {
            color: 'black',
          },
          itemWidth: 5,
          padding: [0, 0, 0, 5],
          data: ['车型一','车型二','车型三','车型四','车型五']
        },
        series: [
          {
            name: 'Nightingale Chart',
            startAngle: 0,
            color: ['rgb(248,69,241)', 'rgb(173,70,243)', 'rgb(80,69,246)', 'rgb(71,119,245)', 'rgb(68,175,240)',
              'rgb(248,69,241,0)', 'rgb(173,70,243,0)', 'rgb(80,69,246,0)', 'rgb(71,119,245,0)', 'rgba(68,175,240,0)'],
            type: 'pie',
            radius: [20, 100],
            center: ['53%', '10%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 0,
            lable: {
              normal: {
            formatter:function(params){ 
    str =  params.data.value+ '辆'
    return str
},
              }

            }
            },
            data:
              [{ value: 600, name: '车型一' },
              { value: 1100, name: '车型二' },
              { value: 1200, name: '车型三' },
              { value: 1300, name: '车型四' },
              { value: 1400, name: '车型五' },
              { value: 600, name: '' },
              { value: 1100, name: '' },
              { value: 1200, name: '' },
              { value: 1300, name: '' },
              { value: 1400, name: '' }
              ],
            fontSize: 20,
//             lable: {
//               normal: {
//             formatter:function(params){ 
//     str =  params.data.value+ '辆'
//     return str
// },
//               }

//             }
          }
        ]

      }
      // 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option)
      myChart1.setOption(option1)
    }
  }

}

</script>

<style scoped>
</style>
